<template>
  <div class="home">
    <van-search placeholder="请输入搜索关键词" v-bind:readonly="true" />
    <base-layout :active="0">
      <van-tabs swipeable sticky color="#07c160">
        <van-tab
          v-for="(tab, index) in homeTabs"
          :title="tab.name"
          :key="index"
        >
          <div class="tab-items" v-if="tab.name === '博客'" ref="tabList">
            <van-pull-refresh v-model="tab.isPushUpLoading">
              <keep-alive>
                <van-list
                  v-model="tab.isPushDownLoading"
                  :finished="tab.isFinished"
                >
                  <div class="boke-content">
                    我是博客内容呢
                  </div>
                </van-list>
              </keep-alive>
            </van-pull-refresh>
          </div>
          <div class="tab-items" v-if="tab.name === '精华'">
            <van-pull-refresh v-model="tab.isPushUpLoading">
              <van-list
                v-model="tab.isPushDownLoading"
                :finished="tab.isFinished"
              >
                <van-cell title="我是精华标题啊"> </van-cell>
              </van-list>
            </van-pull-refresh>
          </div>
          <div class="tab-items" v-if="tab.name === '知识库'">
            <van-pull-refresh v-model="tab.isPushUpLoading">
              <van-list
                v-model="tab.isPushDownLoading"
                :finished="tab.isFinished"
              >
                <van-cell title="我是知识库标题啊">
                  <div>
                    我是知识库内容呢
                  </div>
                </van-cell>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </base-layout>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Search, Tabs, Tab, PullRefresh, List, Cell } from "vant";

import BaseLayout from "@/components/layout/baseLayout.vue"; // @ is an alias to /src

interface HomeTabItem {
  name: string;
  items: HomeTabItem[];
  isPushUpLoading: boolean;
  isPushDownLoading: boolean;
  isFinished: boolean;
}

@Component<Home>({
  name: "home",
  components: {
    "base-layout": BaseLayout,
    "van-search": Search,
    "van-tabs": Tabs,
    "van-tab": Tab,
    "van-pull-refresh": PullRefresh,
    "van-list": List,
    "van-cell": Cell
  }
})
class Home extends Vue {
  homeTabs: HomeTabItem[];

  constructor(props: any) {
    super(props);
    this.homeTabs = [
      {
        name: "博客",
        items: [],
        isPushUpLoading: false,
        isPushDownLoading: false,
        isFinished: true
      },
      {
        name: "精华",
        items: [],
        isPushUpLoading: false,
        isPushDownLoading: false,
        isFinished: true
      },
      {
        name: "知识库",
        items: [],
        isPushUpLoading: false,
        isPushDownLoading: false,
        isFinished: true
      }
    ];
  }
}

export default Home;
</script>
<style lang="less" scoped>
.boke-content {
  width: 300px;
  height: 200px;
  font-size: 50px;
}
</style>
